<template>
  <div class="children">
    <span>{{ props.item.name }}</span>
    <el-button class="btn" type="danger" @click="deleteItem">删除</el-button>
    <el-button class="btn" type="primary" @click="edit">编辑</el-button>
    <el-dialog v-model="dialogVisible" title="编辑">
      <el-input v-model="text"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="save">保存</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const props = defineProps({
  item: Object,
});
const emit = defineEmits(["deleteItem", "editItem"]);
const deleteItem = () => {
  emit("deleteItem", props.item);
};
let dialogVisible = ref(false);
let text = ref();
const edit = () => {
  text.value = props.item.name;
  dialogVisible.value = true;
};

const save = () => {
  emit("editItem", props.item, text.value);
  dialogVisible.value = false;
  text.value = "";
};
</script>
<style lang="scss">
.children
  {
  width: 90%;
  height: 40px;
  line-height: 40px;
  margin: 4px auto;
  text-align: left;
  border: 1px solid #eee;
  padding: 0 12px;
  .btn
     {
    float: right;
  }
}
</style>
